<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-row>
      <el-col :span='12'>
        <p class='p_hr'>上架/下架设置</p>
          <el-form-item label="上架方式"
            prop ='upType'
          >
            <el-radio-group v-model="form.upType"
              @change="form.onTime = ''"
            >
              <el-radio :label="1">暂时不上架、放入仓库</el-radio>
              <el-radio :label="2">立即上架</el-radio>
              <el-radio :label="3">定时上架</el-radio>
            </el-radio-group>
            <el-date-picker
              v-if = 'form.upType == 3'
              v-model="form.onTime"
              type="datetime"
              placeholder="选择上架时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="开售时间"
            prop ='sellType'
          >
            <el-radio-group v-model="form.sellType"
              @change="form.sellTime = ''"
            >
              <el-radio :label="1">上架后立即开售</el-radio>
              <el-radio :label="2">定时开售</el-radio>
            </el-radio-group>
            <el-date-picker
              v-if = 'form.sellType == 2'
              v-model="form.sellTime"
              type="datetime"
              placeholder="选择开售时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="下架方式"
            prop ='downType'
          >
            <el-radio-group v-model="form.downType"
              @change="form.downTime = ''"
            >
              <el-radio :label="1">人工下架</el-radio>
              <el-radio :label="2">定时下架</el-radio>
            </el-radio-group>
            <el-date-picker
              v-if = 'form.downType == 2'
              v-model="form.downTime"
              type="datetime"
              placeholder="选择下架时间">
            </el-date-picker>
          </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
  export default {
    data () {
      let that = this
      return {
        form: {
          upType: '',
          onTime: '',
          sellType: '',
          sellTime: '',
          downType: '',
          downTime: ''
        },
        rules: {
          upType: [
            {
              required: true,
              message: '请选择上架方式',
              trigger: 'change',
              validator (rule, value, callback) {
                if (!value) {
                  callback(new Error('请选择上架方式'))
                }
                if (value === 3 && !that.form.onTime) {
                  callback(new Error('请填写开售时间'))
                } else {
                  callback()
                }
              }
            }
          ],
          sellType: [
            {
              required: true,
              message: '请选择开售时间',
              trigger: 'change',
              validator (rule, value, callback) {
                if (!value) {
                  callback(new Error('请选择开售时间'))
                }
                if (value === 2 && !that.form.sellTime) {
                  callback(new Error('请填写上架时间'))
                } else {
                  callback()
                }
              }
            }
          ],
          downType: [
            {
              required: true,
              message: '请选择下架方式',
              trigger: 'change',
              validator (rule, value, callback) {
                if (!value) {
                  callback(new Error('请选择下架方式'))
                }
                if (value === 2 && !that.form.downTime) {
                  callback(new Error('请填写下架时间'))
                } else {
                  callback()
                }
              }
            }
          ]
        }
      }
    },
    methods: {
      getFormData () {
        return this.form
      },
      formValidation () {
        let result
        this.$refs.form.validate(function (boolean) {
          result = boolean
        })
        return result
      }
    }
  }
</script>
<style>

</style>
